<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="shortcut icon" href="images/favicon.png">

    <title>Clean Zone</title>
	<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,400italic,700,800' rel='stylesheet' type='text/css'>
	<link href='http://fonts.googleapis.com/css?family=Raleway:300,200,100' rel='stylesheet' type='text/css'>

    <!-- Bootstrap core CSS -->
  <link href="js/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="js/bootstrap.switch/bootstrap-switch.css" />
	<link rel="stylesheet" type="text/css" href="js/bootstrap.datetimepicker/css/bootstrap-datetimepicker.min.css" />
	<link rel="stylesheet" type="text/css" href="js/jquery.select2/select2.css" />
	<link rel="stylesheet" type="text/css" href="js/bootstrap.slider/css/slider.css" />
  <link href="css/style.css" rel="stylesheet" />
	<link rel="stylesheet" href="fonts/font-awesome-4/css/font-awesome.min.css">
	<link rel="stylesheet" href="css/pygments.css">
  <link rel="stylesheet" type="text/css" href="js/jquery.nanoscroller/nanoscroller.css" />

  </head>

<body>


<!-- Fixed navbar -->
<div id="head-nav" class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="fa fa-gear"></span>
      </button>
      <a class="navbar-brand" href="#"><span>Clean Zone</span></a>
    </div>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#about">About</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Contact <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
    <li class="dropdown-submenu"><a href="#">Sub menu</a>
      <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        </ul>
    </li>              
    </ul>
        </li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Large menu <b class="caret"></b></a>
    <ul class="dropdown-menu col-menu-2">
      <li class="col-sm-6 no-padding">
        <ul>
        <li class="dropdown-header"><i class="fa fa-group"></i>Users</li>
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="dropdown-header"><i class="fa fa-gear"></i>Config</li>
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li> 
        </ul>
      </li>
      <li  class="col-sm-6 no-padding">
        <ul>
        <li class="dropdown-header"><i class="fa fa-legal"></i>Sales</li>
        <li><a href="#">New sale</a></li>
        <li><a href="#">Register a product</a></li>
        <li><a href="#">Register a client</a></li> 
        <li><a href="#">Month sales</a></li>
        <li><a href="#">Delivered orders</a></li>
        </ul>
      </li>
    </ul>
        </li>
      </ul>
  <ul class="nav navbar-nav navbar-right user-nav">
    <li class="dropdown profile_menu">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown"><img alt="Avatar" src="images/avatar2.jpg" />Jeff Hanneman <b class="caret"></b></a>
      <ul class="dropdown-menu">
        <li><a href="#">My Account</a></li>
        <li><a href="#">Profile</a></li>
        <li><a href="#">Messages</a></li>
        <li class="divider"></li>
        <li><a href="#">Sign Out</a></li>
      </ul>
    </li>
  </ul>			
  <ul class="nav navbar-nav navbar-right not-nav">
    <li class="button dropdown">
      <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown"><i class=" fa fa-comments"></i></a>
      <ul class="dropdown-menu messages">
        <li>
          <div class="nano nscroller">
            <div class="content">
              <ul>
                <li>
                  <a href="#">
                    <img src="images/avatar2.jpg" alt="avatar" /><span class="date pull-right">13 Sept.</span> <span class="name">Daniel</span> I'm following you, and I want your money! 
                  </a>
                </li>
                <li>
                  <a href="#">
                    <img src="images/avatar_50.jpg" alt="avatar" /><span class="date pull-right">20 Oct.</span><span class="name">Adam</span> is now following you 
                  </a>
                </li>
                <li>
                  <a href="#">
                    <img src="images/avatar4_50.jpg" alt="avatar" /><span class="date pull-right">2 Nov.</span><span class="name">Michael</span> is now following you 
                  </a>
                </li>
                <li>
                  <a href="#">
                    <img src="images/avatar3_50.jpg" alt="avatar" /><span class="date pull-right">2 Nov.</span><span class="name">Lucy</span> is now following you 
                  </a>
                </li>
              </ul>
            </div>
          </div>
          <ul class="foot"><li><a href="#">View all messages </a></li></ul>           
        </li>
      </ul>
    </li>
    <li class="button dropdown">
      <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-globe"></i><span class="bubble">2</span></a>
      <ul class="dropdown-menu">
        <li>
          <div class="nano nscroller">
            <div class="content">
              <ul>
                <li><a href="#"><i class="fa fa-cloud-upload info"></i><b>Daniel</b> is now following you <span class="date">2 minutes ago.</span></a></li>
                <li><a href="#"><i class="fa fa-male success"></i> <b>Michael</b> is now following you <span class="date">15 minutes ago.</span></a></li>
                <li><a href="#"><i class="fa fa-bug warning"></i> <b>Mia</b> commented on post <span class="date">30 minutes ago.</span></a></li>
                <li><a href="#"><i class="fa fa-credit-card danger"></i> <b>Andrew</b> killed someone <span class="date">1 hour ago.</span></a></li>
              </ul>
            </div>
          </div>
          <ul class="foot"><li><a href="#">View all activity </a></li></ul>           
        </li>
      </ul>
    </li>
    <li class="button"><a href="javascript:;" class="speech-button"><i class="fa fa-microphone"></i></a></li>				
  </ul>

    </div><!--/.nav-collapse -->
  </div>
</div>



<div id="cl-wrapper">
		<div class="cl-sidebar">
			<div class="cl-toggle"><i class="fa fa-bars"></i></div>
			<div class="cl-navblock">
        <div class="menu-space">
          <div class="content">
            <div class="side-user">
              <div class="avatar"><img src="images/avatar1_50.jpg" alt="Avatar" /></div>
              <div class="info">
                <a href="#">Jeff Hanneman</a>
                <img src="images/state_online.png" alt="Status" /> <span>Online</span>
              </div>
            </div>
            <ul class="cl-vnavigation">
              <li><a href="#"><i class="fa fa-home"></i><span>Dashboard</span></a>
                <ul class="sub-menu">
                  <li><a href="index.html">Version 1</a></li>
                  <li><a href="dashboard2.html"><span class="label label-primary pull-right">New</span> Version 2</a></li>
                </ul>
              </li>
              <li><a href="#"><i class="fa fa-smile-o"></i><span>UI Elements</span></a>
                <ul class="sub-menu">
                  <li><a href="ui-elements.html">General</a></li>
                  <li><a href="ui-buttons.html">Buttons</a></li>
                  <li><a href="ui-modals.html"><span class="label label-primary pull-right">New</span> Modals</a></li>
                  <li><a href="ui-notifications.html"><span class="label label-primary pull-right">New</span> Notifications</a></li>
                  <li><a href="ui-icons.html">Icons</a></li>
                  <li><a href="ui-grid.html">Grid</a></li>
                  <li><a href="ui-tabs-accordions.html">Tabs & Acordions</a></li>
                  <li><a href="ui-nestable-lists.html">Nestable Lists</a></li>
                  <li><a href="ui-treeview.html">Tree View</a></li>
                </ul>
              </li>
              <li><a href="#"><i class="fa fa-list-alt"></i><span>Forms</span></a>
                <ul class="sub-menu">
                  <li><a href="form-elements.html">Components</a></li>
                  <li class="active"><a href="form-validation.html">Validation</a></li>
                  <li><a href="form-wizard.html">Wizard</a></li>
                  <li><a href="form-masks.html">Input Masks</a></li>
                  <li><a href="form-multiselect.html"><span class="label label-primary pull-right">New</span>Multi Select</a></li>
                  <li><a href="form-wysiwyg.html"><span class="label label-primary pull-right">New</span>WYSIWYG Editor</a></li>
                  <li><a href="form-upload.html"><span class="label label-primary pull-right">New</span>Multi Upload</a></li>
                </ul>
              </li>
              <li><a href="#"><i class="fa fa-table"></i><span>Tables</span></a>
                <ul class="sub-menu">
                  <li><a href="tables-general.html">General</a></li>
                  <li><a href="tables-datatables.html"><span class="label label-primary pull-right">New</span>Data Tables</a></li>
                </ul>
              </li>              
              <li><a href="#"><i class="fa fa-map-marker nav-icon"></i><span>Maps</span></a>
                <ul class="sub-menu">
                  <li><a href="maps.html">Google Maps</a></li>
                  <li><a href="vector-maps.html"><span class="label label-primary pull-right">New</span>Vector Maps</a></li>
                </ul>
              </li>             
              <li><a href="#"><i class="fa fa-envelope nav-icon"></i><span>Email</span></a>
                <ul class="sub-menu">
                  <li><a href="email-inbox.html">Inbox</a></li>
                  <li><a href="email-read.html">Email Detail</a></li>
                  <li><a href="email-compose.html"><span class="label label-primary pull-right">New</span>Email Compose</a></li>
                </ul>
              </li>
              <li><a href="typography.html"><i class="fa fa-text-height"></i><span>Typography</span></a></li>
              <li><a href="charts.html"><i class="fa fa-bar-chart-o"></i><span>Charts</span></a></li>
              <li><a href="#"><i class="fa fa-file"></i><span>Pages</span></a>
                <ul class="sub-menu">
                  <li><a href="pages-blank.html">Blank Page</a></li>
                  <li><a href="pages-blank-header.html">Blank Page Header</a></li>
                  <li><a href="pages-blank-aside.html">Blank Page Aside</a></li>
                  <li><a href="pages-login.html">Login</a></li>
                  <li><a href="pages-404.html">404 Page</a></li>
                  <li><a href="pages-500.html">500 Page</a></li>
                  <li><a href="pages-sign-up.html"><span class="label label-primary pull-right">New</span>Sign Up</a></li>
                  <li><a href="pages-forgot-password.html"><span class="label label-primary pull-right">New</span>Forgot Password</a></li>
                  <li><a href="pages-profile.html"><span class="label label-primary pull-right">New</span>Profile</a></li>
                  <li><a href="pages-search.html"><span class="label label-primary pull-right">New</span>Search</a></li>
                  <li><a href="pages-calendar.html"><span class="label label-primary pull-right">New</span>Calendar</a></li>
                  <li><a href="pages-code-editor.html"><span class="label label-primary pull-right">New</span>Code Editor</a></li>
                  <li><a href="pages-gallery.html">Gallery</a></li>
                  <li><a href="pages-timeline.html">Timeline</a></li>
                </ul>
              </li>
            </ul>
          </div>
        </div>
        <div class="text-right collapse-button" style="padding:7px 9px;">
          <input type="text" class="form-control search" placeholder="Search..." />
          <button id="sidebar-collapse" class="btn btn-default" style=""><i style="color:#fff;" class="fa fa-angle-left"></i></button>
        </div>
			</div>
		</div>
   <div class="container-fluid" id="pcont">
    <div class="page-head">
      <h2>Form Validation</h2>
      <ol class="breadcrumb">
        <li><a href="#">Home</a></li>
        <li><a href="#">Form</a></li>
        <li class="active">Validation</li>
      </ol>
    </div>
    <div class="cl-mcont">
    <div class="row">
      <div class="col-sm-6 col-md-6">
        <div class="block-flat">
          <div class="header">							
            <h3>Basic Form</h3>
          </div>
          <div class="content">

          <form action="#" data-parsley-validate novalidate> 
            <div class="form-group">
              <label>User Name</label> <input type="text" name="nick" parsley-trigger="change" required placeholder="Enter user name" class="form-control">
            </div>
            <div class="form-group">
              <label>Email address</label> <input type="email" name="email" parsley-trigger="change" required placeholder="Enter email" class="form-control">
            </div>
            <div class="form-group"> 
              <label>Password</label> <input id="pass1" type="password" placeholder="Password" required class="form-control">
            </div> 
            <div class="form-group"> 
              <label>Repeat Password</label> <input data-parsley-equalto="#pass1" type="password" required placeholder="Password" class="form-control">
            </div> 
            <div class="checkbox">
              <label> <input type="checkbox" name="remember"> Remember me </label> </div> 
              <button class="btn btn-primary" type="submit">Submit</button>
              <button class="btn btn-default">Cancel</button>
            </form>
          
          </div>
        </div>				
      </div>
      
      <div class="col-sm-6 col-md-6">
        <div class="block-flat">
          <div class="header">							
            <h3>Horizontal Form</h3>
          </div>
          <div class="content">
            <form class="form-horizontal" role="form"  data-parsley-validate novalidate>
              <div class="form-group">
              <label for="inputEmail3" class="col-sm-3 control-label">Email</label>
              <div class="col-sm-7">
                <input type="email" required parsley-type="email" class="form-control" id="inputEmail3" placeholder="Email">
              </div>
              </div>
              <div class="form-group">
              <label for="inputPassword3" class="col-sm-3 control-label">Password</label>
              <div class="col-sm-7">
                <input type="password" required class="form-control" id="inputPassword3" placeholder="Password">
              </div>
              </div>
              <div class="form-group">
              <label for="inputPassword3" class="col-sm-3 control-label">Web Site</label>
              <div class="col-sm-7">
                <input type="url" required parsley-type="url" class="form-control" placeholder="URL">
              </div>
              </div>
              <div class="form-group">
              <div class="col-sm-offset-3 col-sm-7">
                <div class="checkbox">
                <label>
                  <input type="checkbox" name="remember_the_fallen"> Remember me
                </label>
                </div>
              </div>
              </div>
              <div class="form-group">
              <div class="col-sm-offset-2 col-sm-10">
                <button type="submit" class="btn btn-primary">Registrer</button>
                <button class="btn btn-default">Cancel</button>
              </div>
              </div>
            </form>
          </div>
        </div>				
      </div>
    </div>
    
    <div class="row">
      <div class="col-md-12">
      
        <div class="block-flat">
          <div class="header">							
            <h3>Validation Types</h3>
          </div>
          <div class="content">
              <form class="form-horizontal group-border-dashed" action="#">
              <div class="form-group">
                <label class="col-sm-3 control-label">Required</label>
                <div class="col-sm-6">
                  <input type="text" class="form-control" required placeholder="Type something" />
                </div>
              </div>
              <div class="form-group">
                <label class="col-sm-3 control-label">Min Length</label>
                <div class="col-sm-6">
                  <input type="text" class="form-control" required data-parsley-minlength="6" placeholder="Min 6 chars." />
                </div>
              </div>
              <div class="form-group">
                <label class="col-sm-3 control-label">Max Length</label>
                <div class="col-sm-6">
                  <input type="text" class="form-control" required data-parsley-maxlength="6" placeholder="Max 6 chars." />
                </div>
              </div>
              <div class="form-group">
                <label class="col-sm-3 control-label">Range Length</label>
                <div class="col-sm-6">
                  <input type="text" class="form-control" required data-parsley-length="[5,10]" placeholder="Text between 5 - 10 chars length" />
                </div>
              </div>
              <div class="form-group">
                <label class="col-sm-3 control-label">Min Value</label>
                <div class="col-sm-6">
                  <input type="text" class="form-control" required data-parsley-min="6" placeholder="Min value is 6" />
                </div>
              </div>
              <div class="form-group">
                <label class="col-sm-3 control-label">Max Value</label>
                <div class="col-sm-6">
                  <input type="text" class="form-control" required data-parsley-max="6" placeholder="Max value is 6" />
                </div>
              </div>
              <div class="form-group">
                <label class="col-sm-3 control-label">Range Value</label>
                <div class="col-sm-6">
                  <input class="form-control" required type="text"   	
type="range" min="6" max="100" placeholder="Number between 6 - 100" />
                </div>
              </div>
              <div class="form-group">
                <label class="col-sm-3 control-label">Regular Exp</label>
                <div class="col-sm-6">
                  <input type="text" class="form-control" required data-parsley-pattern="#[A-Fa-f0-9]{6}" placeholder="Hex. Color" />
                </div>
              </div>
              <div class="form-group">
                <label class="col-sm-3 control-label">Equal To</label>
                <div class="col-sm-3">
                  <input type="password" id="pass2" class="form-control" required placeholder="Password" />
                </div>
                <div class="col-sm-3">
                  <input type="password" class="form-control" required data-parsley-equalto="#pass2" placeholder="Re-Type Password" />
                </div>
              </div>
              <div class="form-group">
                <label class="col-sm-3 control-label">Min check</label>
                <div class="col-sm-6">
                  <div class="radio"> 
                    <label for="ck1"> <input id="ck1" name="ck1" type="checkbox" data-parsley-multiple="groups"  value="bar" data-parsley-mincheck="2"> Option 1</label> 
                  </div>
                  <div class="radio"> 
                    <label for="ck2"> <input id="ck2" name="ck2" type="checkbox" data-parsley-multiple="groups" value="bar2" data-parsley-mincheck="2"> Option 2</label> 
                  </div>
                  <div class="radio"> 
                    <label for="ck3"> <input id="ck3" name="ck3" type="checkbox" data-parsley-multiple="groups"  value="bar3" data-parsley-mincheck="2" required > Option 3</label> 
                  </div>										
                </div>
              </div>
              <div class="form-group">
                <label class="col-sm-3 control-label">Max check</label>
                <div class="col-sm-6">
                  <div class="radio"> 
                    <label> <input type="checkbox" value="bar" name="e1" data-parsley-multiple="group1"> Option 1</label> 
                  </div>
                  <div class="radio"> 
                    <label> <input type="checkbox" value="bar" name="e2" data-parsley-multiple="group1"> Option 2</label> 
                  </div>
                  <div class="radio"> 
                    <label> <input type="checkbox" value="bar" name="e3" data-parsley-multiple="group1" data-parsley-maxcheck="1"> Option 3</label> 
                  </div>										
                </div>
              </div>
              <div class="form-group">
                <label class="col-sm-3 control-label">E-Mail</label>
                <div class="col-sm-6">
                  <input type="email" class="form-control" required parsley-type="email" placeholder="Enter a valid e-mail" />
                </div>
              </div>
              <div class="form-group">
                <label class="col-sm-3 control-label">URL</label>
                <div class="col-sm-6">
                  <input parsley-type="url" type="url" class="form-control" required placeholder="URL" />
                </div>
              </div>
              <div class="form-group">
                <label class="col-sm-3 control-label">Digits</label>
                <div class="col-sm-6">
                  <input data-parsley-type="digits" type="text" class="form-control" required placeholder="Enter only digits" />
                </div>
              </div>
              <div class="form-group">
                <label class="col-sm-3 control-label">Number</label>
                <div class="col-sm-6">
                  <input data-parsley-type="number" type="text" class="form-control" required placeholder="Enter only numbers" />
                </div>
              </div>
              <div class="form-group">
                <label class="col-sm-3 control-label">Alphanumeric</label>
                <div class="col-sm-6">
                  <input data-parsley-type="alphanum" type="text" class="form-control" required placeholder="Enter alphanumeric value" />
                </div>
              </div>
              <div class="form-group">
                <label class="col-sm-3 control-label">Textarea</label>
                <div class="col-sm-6">
                  <textarea required class="form-control"></textarea>
                </div>
              </div>
              <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                  <button type="submit" class="btn btn-primary">Submit</button>
                  <button class="btn btn-default">Cancel</button>
                </div>
              </div>
            </form>
          </div>
        </div>
        
      </div>
    </div>
    
    </div>
  </div> 
</div>


  <script src="js/jquery.js"></script>
  <script src="js/jquery.parsley/dist/parsley.min.js" type="text/javascript"></script>
  <script src="js/jquery.parsley/src/extra/dateiso.js" type="text/javascript"></script>
  <script src="js/jquery.select2/select2.min.js" type="text/javascript"></script>
  <script src="js/bootstrap.slider/js/bootstrap-slider.js" type="text/javascript"></script>
	<script type="text/javascript" src="js/jquery.nanoscroller/jquery.nanoscroller.js"></script>
	<script type="text/javascript" src="js/jquery.nestable/jquery.nestable.js"></script>
	<script type="text/javascript" src="js/behaviour/general.js"></script>
  <script src="js/jquery.ui/jquery-ui.js" type="text/javascript"></script>
	<script type="text/javascript" src="js/bootstrap.switch/bootstrap-switch.min.js"></script>
	<script type="text/javascript" src="js/bootstrap.datetimepicker/js/bootstrap-datetimepicker.min.js"></script>

  <script type="text/javascript">
    $(document).ready(function(){
      //initialize the javascript
      App.init();
      $('form').parsley();
    });
  </script>
  <!-- Bootstrap core JavaScript
  ================================================== -->
  <!-- Placed at the end of the document so the pages load faster -->
    <script src="js/behaviour/voice-commands.js"></script>
  <script src="js/bootstrap/dist/js/bootstrap.min.js"></script>
</body>
</html>
